<script type="application/x-typescript">
  class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
  }

  interface Person {
    firstName: string;
    lastName: string;
  }

  function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
  }

  let user = new Student("Jane", "M.", "User");

  document.body.innerHTML = greeter(user);
</script>
<script lang="ts">
  class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
  }

  interface Person {
    firstName: string;
    lastName: string;
  }

  function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
  }

  let user = new Student("Jane", "M.", "User");

  document.body.innerHTML = greeter(user);
</script>
<script lang="tsx">
  class CommentBox extends React.Component<{ url: string, pollInterval: number}, CommentData> {
    constructor(){
      super()
      this.state = { data: [] };
    }
    fetchComments() {
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        cache: false,
        success: (data) => this.setState({ data: data }),
        error: (xhr, status, err) => console.error(status, err)
      })
    }
    componentDidMount() {
      this.fetchComments();
      setInterval(this.fetchComments.bind(this), this.props.pollInterval);
    }
    render() {
      let handleCommentSubmit = (comment: { author: string, text: string }) => {
        console.warn('comment submitted!', comment);
        const updated = this.state.data.slice(0);
        updated.push(comment);
        this.setState({ data: updated });
      }
      return (
        <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data}/>
      <CommentForm onCommentSubmit={handleCommentSubmit} />
      </div>
    );
    }
  }
</script>
